<template>
    <div class="columnManage">
        <breadcrumb :breadcrumb="['栏目管理']"></breadcrumb>
        <div class="search-header">
            <el-form inline
                     ref="searchRef"
                     :model="searchData">
                <el-form-item>
                    <el-input v-model="searchData.name"
                              size="small"
                              clearable
                              placeholder="姓名"
                              @input="pageChange(1)">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               size="small"
                               icon="el-icon-search"
                               @click="pageChange(1)">查询
                    </el-button>
                    <el-button type="primary"
                               size="small"
                               icon="el-icon-plus"
                               @click="addOrUpdate('add')">新增
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="list"
                  class="tableList el-table--scrollable-y"
                  height="calc(100vh - 20px - 45px - 61px - 10px - 10px - 72px)"
                  style="width: 100%;">
            <el-table-column prop="orderNumber"
                             label="序号"
                             align="center"></el-table-column>
            <el-table-column prop="name"
                             label="栏目名称"
                             align="center"></el-table-column>
            <el-table-column prop="link"
                             label="链接"
                             align="center"></el-table-column>
            <el-table-column prop="keyword"
                             label="关键词"
                             align="center"></el-table-column>
            <el-table-column prop="description"
                             label="描述"
                             align="center"></el-table-column>
            <el-table-column prop="created_time"
                             label="创建时间"
                             align="center">
                <template slot-scope='scope'>
                    <span>{{scope.row.created_time | dateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updated_time"
                             label="更新时间"
                             align="center">
                <template slot-scope='scope'>
                    <span>{{scope.row.updated_time | dateTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             align="center">
                <template slot-scope="scope">
                    <el-button type="primary"
                               size="small"
                               @click="addOrUpdate('update', scope.row)">修改</el-button>
                    <el-button type="danger"
                               size="small"
                               @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pageContent :total="dataTotal"
                     :page="1"
                     :pageSize="10"
                     @pageChange="(val, limit) => {pageChange(val, limit)}">
        </pageContent>
        <el-dialog :title="saveData.id === '' ? '新增' : '修改'"
                   width="500px"
                   :close-on-click-modal="false"
                   :visible.sync="addOrUpdateVisible"
                   :before-close="close">
            <el-form ref="addOrUpdateRef"
                     :model="saveData"
                     :rules="addOrUpdateRules"
                     label-width="100px">
                <el-form-item label="栏目名称:"
                              prop="name">
                    <el-input v-model="saveData.name"></el-input>
                </el-form-item>
                <el-form-item label="链接:"
                              prop="link">
                    <el-input v-model="saveData.link"></el-input>
                </el-form-item>
                <el-form-item label="关键词:"
                              prop="keyword">
                    <el-input v-model="saveData.keyword"></el-input>
                </el-form-item>
                <el-form-item label="描述:"
                              prop="description">
                    <el-input v-model="saveData.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button size="small"
                           @click="close">取消</el-button>
                <el-button type="primary"
                           size="small"
                           @click="submit">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import pageContent from '@/components/pageContent/pageContent'
import breadcrumb from '@/components/breadcrumb/breadcrumb'
import { columnApi } from '@/api'
import { numSort, timeConversion } from '@/utils'
export default {
    name: 'admin',
    data() {
        return {
            searchData: {
                name: '',
                currentPage: 1,
                pageSize: 10,
            },
            dataTotal: 0,
            list: [],
            addOrUpdateVisible: false,
            saveData: {
                id: '',
                name: '',
                link: '',
                keyword: '',
                description: '',
            },
            addOrUpdateRules: {
                name: [
                    {
                        required: true,
                        message: '请输入栏目名',
                        trigger: 'blur',
                    },
                ],
                link: [
                    { required: true, message: '请输入链接', trigger: 'blur' },
                ],
                keyword: [
                    {
                        required: true,
                        message: '请输入关键词',
                        trigger: 'blur',
                    },
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                ],
            },
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 获取列表
        async getList() {
            let params = Object.assign({}, this.searchData)
            const { err, data } = await columnApi.getPage(params)
            if (err) {
                return false
            }
            if (data.list.length === 0 && params.currentPage !== 1) {
                // 删除后判断当前页面是否无数据 如果有数据则正常处理数据，如不正常数据为空时。则重新获取有数据的页面条件
                // 删除后当前页面无数据时，则重新计算有数据的页面重新获取数据
                let current = Math.ceil(data.totalCount / params.pageSize)
                this.pageChange(current)
            } else {
                data.list.forEach((item, index) => {
                    item['orderNumber'] = numSort(index, params.currentPage, params.pageSize)
                })
                this.list = data.list
                this.dataTotal = data.totalCount
            }
        },
        addOrUpdate(val, item) {
            this.addOrUpdateVisible = true
            if (val === 'update') {
                this.detDetail(item)
            }
        },
        // 提交
        submit() {
            let api = null
            let message = ''
            this.$refs.addOrUpdateRef.validate(async (valid) => {
                if (valid) {
                    let params = Object.assign({}, this.saveData)
                    if (params.id === '') {
                        api = columnApi.addData
                        message = '添加成功'
                    } else {
                        api = columnApi.updateData
                        message = '更新成功'
                    }
                    const { err, data } = await api(params)
                    if (err) {
                        return false
                    }
                    this.$message({
                        message: message,
                        type: 'success',
                    })
                    this.close()
                    this.getList()
                }
            })
        },
        // 获取详情
        async detDetail(item) {
            const { err, data } = await columnApi.detailData(item.id)
            if (err) {
                return false
            }
            this.saveData.id = data.id
            this.saveData.name = data.name
            this.saveData.link = data.link
            this.saveData.keyword = data.keyword
            this.saveData.description = data.description
        },
        // 删除
        del(item) {
            this.$confirm('确定删除当前数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const { err, data } = await articleApi.delData(item)
                    if (err) {
                        return false
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                    })
                    this.getList()
                })
                .catch(() => {})
        },
        // 分页
        pageChange(val, limit) {
            if (limit) {
                this.searchData.pageSize = limit
            }
            this.searchData.currentPage = val
            this.getList()
        },
        // 关闭
        close() {
            this.addOrUpdateVisible = false
            this.saveData.id = ''
            this.$refs.addOrUpdateRef.resetFields()
        },
    },
    components: {
        breadcrumb,
        pageContent,
    },
}
</script>

<style scoped lang="less">
</style>